<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-container {
  background-color: #ffffff;
}
.flex-box {
  width: 100%;
  overflow: hidden;
  position: relative;
}
// 两个相框一大一小
.img-frame-large {
  margin: 0 5px;
  flex: 0 0 auto;
  width: 400px;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.img-frame-small {
  margin: 0 5px;
  flex: 0 0 auto;
  width: 300px;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
// 相框部分结束

// 两组图片
.group {
  flex: 0 0 auto;
  display: flex;
  flex-flow: nowrap;
}

// 每组两行图片
.line {
  margin-bottom: 10px;
  display: flex;
  flex-flow: nowrap;
  animation: move 100s;
}
.line2 {
  margin-bottom: 10px;
  display: flex;
  flex-flow: nowrap;
  animation: reverseMove 100s;
}

// 标题栏部分
.title-container {
  padding: 100px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  background-color: #ffffff;
  width: 1000px;
  height: 500px;
  position: absolute;
  bottom: -140px;
  box-shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.017),
    0px 2.5px 5.3px rgba(0, 0, 0, 0.024), 0px 4.6px 10px rgba(0, 0, 0, 0.03),
    0px 8.3px 17.9px rgba(0, 0, 0, 0.036),
    0px 15.5px 33.4px rgba(0, 0, 0, 0.043), 0px 37px 80px rgba(0, 0, 0, 0.06);
}
.title-header {
  margin-bottom: 30px;
  color: #000000d9;
  font-size: 48px;
  font-weight: 500;
  font-family: 'PingFang SC';
  text-align: center;
}
.title-body {
  margin-bottom: 30px;
  color: #000000a6;
  font-size: 18px;
  font-weight: 400;
  font-family: 'PingFang SC';
  text-align: center;
  line-height: 28px;
}
.title-footer {
  margin-top: 20px;
  color: #00000073;
  font-size: 14px;
  font-weight: 400;
  font-family: 'PingFang SC';
  text-align: center;
  line-height: 24px;
}

// 详细信息
.details-container {
  margin: 0 auto;
  margin-top: 200px;
  width: 1000px;
}
.details-title {
  margin-bottom: 30px;
  color: #000000d9;
  font-size: 40px;
  font-weight: 500;
  font-family: 'PingFang SC';
  text-align: center;
}
.details-row {
  margin-bottom: 30px;
}
.details-desc {
  width: 50%;
  padding-left: 100px;
  padding-top: 15%;
  text-align: left;
  span {
    font-size: 31px;
    font-weight: 500;
    font-family: 'PingFang SC';
    line-height: 50px;
  }
  p {
    color: #000000a6;
    font-size: 16px;
    font-weight: 400;
    font-family: 'PingFang SC';
    line-height: 24px;
  }
}

// 申请流程
.process-desc-container {
  margin: 0 auto;
  margin-bottom: 30px;
  width: 1000px;
}
.process-title {
  color: #000000d9;
  font-size: 39px;
  font-weight: 500;
  font-family: 'PingFang SC';
  text-align: center;
  margin-bottom: 30px;
}
.process-step-container {
  text-align: center;
  span {
    color: #000000d9;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    font-family: 'PingFang SC';
  }
  p {
    color: #000000d9;
    font-size: 14px;
    font-weight: 400;
    font-family: 'PingFang SC';
    text-align: center;
    line-height: 24px;
  }
}

// 摄影师卡
.photoer-card-container {
  margin: 0 auto;
  margin-bottom: 30px;
  width: 1000px;
}
.card-item {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 300px;
  height: 350px;
  position: relative;
  background-color: #fafafa;
  overflow: hidden;

  .card-bgi-container {
    width: 100%;
    height: 40%;
    overflow: hidden;
    .card-item-bgi {
      width: 100%;
      height: 100%;
      transition: all ease 0.3s;
      &:hover {
        scale: 110%;
      }
    }
  }

  .card-avatar {
    position: absolute;
    left: 100px;
    top: 90px;
    width: 100px;
    height: 100px;
  }
}

.card-username {
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: center;
  line-height: 30px;
  span {
    color: #000000d9;
    font-size: 16px;
    font-weight: 400;
    font-family: 'PingFang SC';
    text-align: center;
    line-height: 24px;
  }
  p {
    color: #00000073;
    font-size: 12px;
    font-weight: 400;
    font-family: 'PingFang SC';
    text-align: center;
    line-height: 16px;
  }
}
.card-userinfo {
  text-align: center;
  width: 200px;
  span {
    display: block;
    color: #000000a6;
    font-size: 12px;
    font-weight: 400;
    font-family: 'PingFang SC';
    text-align: center;
  }
  p {
    color: #000000d9;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Open Sans';
    text-align: center;
  }
}
.card-btn {
  margin: 10px;
  span {
    width: 100px;
    color: skyblue;
  }
}
.card-readmore {
  margin-top: 30px;
}

// 联系我们
.contact-container {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 30px;
  width: 1000px;
  h1 {
    display: block;
    margin-bottom: 30px;
    color: #000000d9;
    font-size: 31px;
    font-weight: 500;
    font-family: 'PingFang SC';
    text-align: center;
    line-height: 36px;
  }
}
@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-1000px);
  }
}
@keyframes reverseMove {
  from {
    transform: translateX(-500px);
  }
  to {
    transform: translateX(0);
  }
}
</style>
<template>
  <div class="main-container">
    <!-- 背景滚动图展示框 -->
    <div class="flex-box">
      <div class="line">
        <div class="group">
          <div
            :class="'img-frame-' + item.img_size"
            v-for="item in img_group1_url"
            :key="item"
          >
            <img :src="item.url" />
          </div>
        </div>

        <div class="group">
          <div
            :class="'img-frame-' + item.img_size"
            v-for="item in img_group1_url"
            :key="item"
          >
            <img :src="item.url" />
          </div>
        </div>
      </div>

      <div class="line2">
        <div class="group">
          <div
            :class="'img-frame-' + item.img_size"
            v-for="item in img_group1_url"
            :key="item"
          >
            <img :src="item.url" />
          </div>
        </div>

        <div class="group">
          <div
            :class="'img-frame-' + item.img_size"
            v-for="item in img_group1_url"
            :key="item"
          >
            <img :src="item.url" />
          </div>
        </div>
      </div>
    </div>

    <!-- 招聘标题栏 -->
    <el-row :gutter="0" justify="center">
      <div class="title-container">
        <div class="title-header"><p>天空之城签约摄影师招募</p></div>
        <div class="title-body">
          <p>
            “天空之城签约摄影师”项目汇聚了中国、美国、意大利、澳大利亚等全球数十个国家/地区的优秀航拍摄影师，在这里他们持续分享着自己独特视角下的世界，不断为大家呈现视觉盛宴。
            如果你也擅长使用大疆产品拍出精彩的影像作品，如果你也想与众多优秀摄影师一起共创更多优质内容，如果你也期待自己的创作被更多人看见，现在我们诚邀你加入，共筑缤纷多彩的天空之城。
          </p>
        </div>
        <div class="title-footer">
          <p>* 申请条件：需有 30 份公开展示的作品，且至少获得 1 次作品精选。</p>
        </div>
      </div>
    </el-row>

    <!-- 主要内容栏 -->
    <div class="details-container">
      <div class="details-title"><p>你可以获得</p></div>

      <!-- 展示行1 -->
      <div class="details-row">
        <el-row :gutter="0" justify="center">
          <el-col :span="12">
            <div class="details-desc">
              <span>荣誉认证</span>
              <p>
                专属徽章标识<br />
                精美签约证书
              </p>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <img v-if="info_img_group[0]" :src="info_img_group[0].url" />
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 展示行1结束 -->

      <!-- 展示行2 -->
      <div class="details-row">
        <el-row :gutter="0" justify="center">
          <el-col :span="12">
            <div>
              <img v-if="info_img_group[1]" :src="info_img_group[1].url" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="details-desc">
              <span>荣誉认证</span>
              <p>
                专属徽章标识<br />
                精美签约证书
              </p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 展示行2结束 -->

      <!-- 展示行3 -->
      <div class="details-row">
        <el-row :gutter="0" justify="center">
          <el-col :span="12">
            <div class="details-desc">
              <span>荣誉认证</span>
              <p>
                专属徽章标识<br />
                精美签约证书
              </p>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <img v-if="info_img_group[2]" :src="info_img_group[2].url" />
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 展示行3结束 -->

      <!-- 展示行4 -->
      <div class="details-row">
        <el-row :gutter="0" justify="center">
          <el-col :span="12">
            <div>
              <img v-if="info_img_group[3]" :src="info_img_group[3].url" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="details-desc">
              <span>荣誉认证</span>
              <p>
                专属徽章标识<br />
                精美签约证书
              </p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 展示行4结束 -->
    </div>

    <!-- 条件展示栏 -->
    <div class="process-desc-container">
      <div class="process-title">
        <p>如何成为天空之城摄影师</p>
      </div>
      <el-row :gutter="0" justify="space-between">
        <el-col :span="4">
          <div class="process-step-container">
            <div>
              <el-icon size="50"><Printer /></el-icon>
            </div>
            <span>提交申请</span>
            <p>在天空之城网页端填写申请表</p>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="process-step-container">
            <div>
              <el-icon size="50"><Document /></el-icon>
            </div>
            <span>人工审核</span>
            <p>天空之城组委会进行资料审核</p>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="process-step-container">
            <div>
              <el-icon size="50"><Checked /></el-icon>
            </div>
            <span>通过审核</span>
            <p>资料审核通过</p>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="process-step-container">
            <div>
              <el-icon size="50"><ChatSquare /></el-icon>
            </div>
            <span>签署合约</span>
            <p>天空之城专人联系签约</p>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="process-step-container">
            <div>
              <el-icon size="50"><Connection /></el-icon>
            </div>
            <span>完成认证</span>
            <p>签约完成正式获得认证</p>
          </div>
        </el-col>
      </el-row>

      <div class="title-footer">
        <p>* 申请条件：需有 30 份公开展示的作品，且至少获得 1 次作品精选。</p>
      </div>
    </div>

    <!-- 签约摄影师 -->
    <div class="photoer-card-container">
      <el-row :gutter="10" justify="center">
        <!-- 摄影师1 -->
        <el-col :span="8">
          <div class="card-item">
            <div class="card-bgi-container">
              <div class="card-item-bgi">
                <img
                  src="https://img-1317399392.cos.ap-guangzhou.myqcloud.com/img/20230417175310.png"
                  alt=""
                />
              </div>
            </div>

            <div class="card-avatar">
              <el-avatar
                :size="100"
                src="https://img-1317399392.cos.ap-guangzhou.myqcloud.com/img/64490de1eb617e7478d270dbf0c2201.jpg"
              ></el-avatar>
            </div>

            <div class="card-username">
              <h1>一口士力架</h1>
              <p>中国大陆</p>
            </div>

            <div class="card-userinfo">
              <el-row :gutter="0" justify="spacebetween">
                <el-col :span="8">
                  <span>声望</span><br />
                  <p>980</p>
                </el-col>
                <el-col :span="8">
                  <span>粉丝</span><br />
                  <p>980</p>
                </el-col>
                <el-col :span="8">
                  <span>作品</span><br />
                  <p>980</p>
                </el-col>
              </el-row>
            </div>

            <div class="card-btn">
              <el-button type="info" round="true" color="rgb(233, 236, 238)"
                ><span>关注</span></el-button
              >
            </div>
          </div>
        </el-col>
        <!-- 摄影师2 -->
        <el-col :span="8">
          <div class="card-item">
            <div class="card-bgi-container">
              <div class="card-item-bgi">
                <img
                  src="https://img-1317399392.cos.ap-guangzhou.myqcloud.com/img/20230417175310.png"
                  alt=""
                />
              </div>
            </div>

            <div class="card-avatar">
              <el-avatar
                :size="100"
                src="https://img-1317399392.cos.ap-guangzhou.myqcloud.com/img/64490de1eb617e7478d270dbf0c2201.jpg"
              ></el-avatar>
            </div>

            <div class="card-username">
              <h1>一口士力架</h1>
              <p>中国大陆</p>
            </div>

            <div class="card-userinfo">
              <el-row :gutter="0" justify="spacebetween">
                <el-col :span="8">
                  <span>声望</span><br />
                  <p>980</p>
                </el-col>
                <el-col :span="8">
                  <span>粉丝</span><br />
                  <p>980</p>
                </el-col>
                <el-col :span="8">
                  <span>作品</span><br />
                  <p>980</p>
                </el-col>
              </el-row>
            </div>

            <div class="card-btn">
              <el-button type="info" round="true" color="rgb(233, 236, 238)"
                ><span>关注</span></el-button
              >
            </div>
          </div>
        </el-col>
        <!-- 摄影师3 -->
        <el-col :span="8">
          <div class="card-item">
            <div class="card-bgi-container">
              <div class="card-item-bgi">
                <img
                  src="https://img-1317399392.cos.ap-guangzhou.myqcloud.com/img/20230417175310.png"
                  alt=""
                />
              </div>
            </div>

            <div class="card-avatar">
              <el-avatar
                :size="100"
                src="https://img-1317399392.cos.ap-guangzhou.myqcloud.com/img/64490de1eb617e7478d270dbf0c2201.jpg"
              ></el-avatar>
            </div>

            <div class="card-username">
              <h1>一口士力架</h1>
              <p>中国大陆</p>
            </div>

            <div class="card-userinfo">
              <el-row :gutter="0" justify="spacebetween">
                <el-col :span="8">
                  <span>声望</span><br />
                  <p>980</p>
                </el-col>
                <el-col :span="8">
                  <span>粉丝</span><br />
                  <p>980</p>
                </el-col>
                <el-col :span="8">
                  <span>作品</span><br />
                  <p>980</p>
                </el-col>
              </el-row>
            </div>

            <div class="card-btn">
              <el-button type="info" round="true" color="rgb(233, 236, 238)"
                ><span>关注</span></el-button
              >
            </div>
          </div>
        </el-col>

        <div class="card-readmore">
          <el-link type="primary" target="_blank">查看更多</el-link>
        </div>
      </el-row>
    </div>

    <!-- 联系我们 -->
    <div class="contact-container">
      <el-icon size="50"><Message /></el-icon>
      <h1>联系我们</h1>
      <el-link type="primary" href="" target="_blank"
        >skypixel.contact@dji.com</el-link
      >
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
import request from '../../utils/axios';

let img_group1_size = reactive([
  'large',
  'small',
  'large',
  'small',
  'small',
  'large',
  'small',
]);
let img_group1_url = ref([]);

let info_img_group = ref([]);

// 请求头部图片
onMounted(async () => {
  let head_bgi = await request({
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    method: 'GET',
    params: {
      carouselGroupId: 1399,
    },
  });

  img_group1_url.value = head_bgi.data.Carousels;
  if (img_group1_url.value) {
    img_group1_url.value = img_group1_url.value.map((ele, index) => {
      ele['img_size'] = img_group1_size[index];
      return ele;
    });
  }
});

// 请求详情图
onMounted(async () => {
  let info_bgi = await request({
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    method: 'GET',
    params: {
      carouselGroupId: 1402,
    },
  });
  info_img_group.value = info_bgi.data.Carousels;
  console.log(info_img_group);
});
</script>
